<template>
  <div class="bottom-panel" v-if="bottomPanelShow">
    <component :is="bottomPanel"> </component>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Video from "./CVideo.vue";
@Component({
  name: "BottomPanel",
  components: {
    Video
  }
})
export default class extends Vue {
  get bottomPanel() {
    return this.$store.getters["videoPanel/bottomPanel"];
  }
  get bottomPanelShow() {
    return this.$store.getters["videoPanel/bottomPanelShow"];
  }
}
</script>

<style lang="scss" scoped>
.bottom-panel {
  z-index: 100;
  position: absolute;
  height: 305px;
  width: 988px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  pointer-events: none;
  align-content: flex-start;
  background: #001022;
  padding: 20px 0;
  & > * {
    pointer-events: auto;
  }
  &.bottom-panel-none {
    width: 0px;
    height: 0px;
  }
}
</style>
